<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/datav.min.js"></script>
</head>

<body>
    <dv-border-box-1>dv-border-box-1</dv-border-box-1>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 100%;height:400px"></div>
</body>
<script src="../js/echarts.min.js"></script>
<script type="application/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    const gaugeData = [{
        value: 20,
        name: 'Perfect',
        title: {
            offsetCenter: ['0%', '-30%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '-20%']
        }
    }, {
        value: 40,
        name: 'Good',
        title: {
            offsetCenter: ['0%', '0%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '10%']
        }
    }, {
        value: 60,
        name: 'Commonly',
        title: {
            offsetCenter: ['0%', '30%']
        },
        detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '40%']
        }
    }];
    option = {
        series: [{
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
                show: false
            },
            progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false,
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#464646'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 40
                }
            },
            splitLine: {
                show: false,
                distance: 0,
                length: 10
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                distance: 50
            },
            data: gaugeData,
            title: {
                fontSize: 14
            },
            detail: {
                width: 50,
                height: 14,
                fontSize: 14,
                color: 'auto',
                borderColor: 'auto',
                borderRadius: 20,
                borderWidth: 1,
                formatter: '{value}%'
            }
        }]
    };
    setInterval(function() {
        gaugeData[0].value = +(Math.random() * 100).toFixed(2);
        gaugeData[1].value = +(Math.random() * 100).toFixed(2);
        gaugeData[2].value = +(Math.random() * 100).toFixed(2);
        myChart.setOption({
            series: [{
                data: gaugeData,
                pointer: {
                    show: false
                }
            }]
        });
    }, 2000);
    myChart.setOption(option);
</script>

</html>